<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.global.js"></script>
    <script src="js/element.js"></script>
    <link rel="stylesheet" href="css/element.css">
    <script src="js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <h1>定时任务列表</h1>
    <div>
        <el-button type="primary" @click="showAddJobView">添加新任务</el-button>
        <el-table :data="jobs" border style="width: 100%">
            <el-table-column width="100" prop="jobName" label="任务名称"></el-table-column>
            <el-table-column width="100" prop="jobGroup" label="任务组"></el-table-column>
            <el-table-column prop="description" label="任务描述"></el-table-column>
            <el-table-column width="240" prop="jobExpression" label="任务执行表达式"></el-table-column>
            <el-table-column width="100" label="任务状态">
                <template #default="scope">
                    <el-tag v-if="scope.row.status === 'NORMAL'" type="success">运行</el-tag>
                    <el-tag v-if="scope.row.status === 'PAUSED'" type="danger">暂停</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="startTime" label="任务开始时间"></el-table-column>
            <el-table-column prop="endTime" label="任务结束时间"></el-table-column>
            <el-table-column prop="cronExpression" label="cron表达式"></el-table-column>
            <el-table-column prop="concurrent" label="是否允许并发">
                <template #default="scope">
                    <el-tag v-if="scope.row.concurrent === 0" type="danger">不允许</el-tag>
                    <el-tag v-if="scope.row.concurrent === 1" type="success">允许</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="danger" @click="changeStatus(scope.row,'PA')">暂停</el-button>
                    <el-button type="primary" @click="changeStatus(scope.row,'RU')">恢复</el-button>
                    <el-button type="success" @click="triggerJob(scope.row)">触发</el-button>
                    <el-button type="default" @click="showEditJobView(scope.row)">编辑任务</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <el-dialog
            v-model="dialogVisible"
            :title="title"
            width="700">
        <div>
            <table>
                <tr>
                    <td>任务名称：</td>
                    <td>
                        <el-input v-model="job.jobName"></el-input>
                    </td>
                    <td>任务组：</td>
                    <td>
                        <el-input v-model="job.jobGroup"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>作业描述信息：</td>
                    <td>
                        <el-input v-model="job.description"></el-input>
                    </td>
                    <td>作业表达式：</td>
                    <td>
                        <el-input v-model="job.jobExpression"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>CRON 表达式：</td>
                    <td>
                        <el-input v-model="job.cronExpression"></el-input>
                    </td>
                    <td>是否允许并发执行：</td>
                    <td>
                        <el-radio-group v-model="job.concurrent">
                            <el-radio value="1" size="medium">是</el-radio>
                            <el-radio value="0" size="medium">否</el-radio>
                        </el-radio-group>
                    </td>
                </tr>
                <tr>
                    <td>任务开始时间：</td>
                    <td>
                        <el-date-picker
                                v-model="job.startTime"
                                type="datetime"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                placeholder="任务开始时间"/>
                    </td>
                    <td>任务结束时间：</td>
                    <td>
                        <el-date-picker
                                v-model="job.endTime"
                                type="datetime"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                placeholder="任务结束时间"/>
                    </td>
                </tr>
            </table>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="doAddAndUpdateJob">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</div>
<script>

    const app = Vue.createApp({
        data() {
            return {
                jobs: [],
                title: "新增任务",
                job: {
                    jobName: "job03",
                    jobGroup: "group01",
                    description: "我的作业3",
                    jobExpression: "@helloService.sayHello('wangwu')",
                    cronExpression: "0/1 * * * * ?",
                    startTime: undefined,
                    endTime: undefined,
                    concurrent: 0
                },
                dialogVisible: false
            }
        },
        /**
         * 组件初始化时调用这个方法，可以用来初始化数据
         */
        mounted() {
            this.initJobs();
        },
        methods: {
            showEditJobView(data) {
                this.title = "编辑任务";
                this.job = JSON.parse(JSON.stringify(data));
                this.dialogVisible = true;
            },
            changeStatus(data, status) {
                data.status = status;
                // 发送请求
                axios.post("/job/changeStatus", data).then(response => {
                    // 刷新页面
                    this.initJobs();
                    ElMessage({
                        message: response.data.msg,
                        type: 'success',
                    })
                })
            },
            doAddAndUpdateJob() {
                if (this.title === "新增任务") {
                    // 发送请求
                    axios.post("/job", this.job).then(response => {
                        // 关闭弹窗
                        this.dialogVisible = false;
                        // 刷新页面
                        this.initJobs();
                        // 提示成功
                        ElMessage({
                            message: response.data.msg,
                            type: 'success',
                        })
                    })
                }else if(this.title === "编辑任务") {
                    // 发送请求
                    axios.put("/job", this.job).then(response => {
                        // 关闭弹窗
                        this.dialogVisible = false;
                        // 刷新页面
                        this.initJobs();
                    })
                }
            },
            showAddJobView() {
                // 初始化数据
                this.title = "新增任务";
                // 打开弹窗
                this.dialogVisible = true;
            },
            initJobs() {
                axios.get("/job").then(response => {
                    this.jobs = response.data;
                })
            },
        }
    }).use(ElementPlus).mount('#app');
</script>
</body>
</html>